import { useRef } from 'react';

export default function Counter() {
  // useRef 返回一个可变的 ref 对象，其 .current 属性被初始化为传入的参数（initialValue）。
  // 该 ref 对象在组件的整个生命周期内保持不变。
  // 修改ref不会触发组件的重新渲染，只会触发组件内部的state的更新。这与state的更新不同。
  let ref = useRef(0);

  function handleClick() {
    ref.current = ref.current + 1;
    alert('你点击了 ' + ref.current + ' 次!');
  }

  return (
    <button onClick={handleClick}>
      点我！
    </button>
  );
}

export function Form() {
  // 自动返回当前组件的input元素的ref对象
  const inputRef = useRef(null);

  function handleClick() {
    inputRef.current.focus();
  }

  return (
    <>
      <input ref={inputRef} />
      <button onClick={handleClick}>
        聚焦输入框
      </button>
    </>
  );
}
